import useGetLatestAvatar from "@/app/[language]/query/useGetLatestAvatar";
import AvatarTitle from "@/components/AvatarTitle";
import { useTranslations } from "next-intl";
import { Col, Row } from "reactstrap";
import { getDatetime } from "taehui-ts/date";

export default function LatestAvatarsView() {
  const t = useTranslations();

  const { data: latestAvatar, isFetched: isLatestAvatarLoaded } =
    useGetLatestAvatar();

  return (
    <Row className="g-0">
      {[...Array(2).keys()].map((i) => (
        <Col className="m-1" key={i}>
          <h5>{t(`latestAvatarsView${i}`)}</h5>
          {isLatestAvatarLoaded
            ? latestAvatar[i].map(({ avatarID, avatarName, date }) => (
                <Row className="g-0" key={avatarID}>
                  <AvatarTitle avatarID={avatarID} avatarName={avatarName}>
                    <span>{getDatetime(date)}</span>
                  </AvatarTitle>
                </Row>
              ))
            : [...Array(5).keys()].map((i) => (
                <Row className="g-0" key={i}>
                  <AvatarTitle avatarID="" avatarName="Loading...">
                    {null}
                  </AvatarTitle>
                </Row>
              ))}
        </Col>
      ))}
    </Row>
  );
}